<template>
  <div class="tab_model">
    <!-- 模块 -->
    <ul>
      <li v-for="(item, index) in substationList" :key="index" style="margin-bottom: 5px" class="committee_content model_content gl_clear">
        <div class="game_logo_wrap gl_fl" @click="jumpToSubstationHomePage(item)">
          <img class="game_logo" :src="getStaticFileUrl(item.logoImage)">
        </div>
        <div class="game_info_wrap">
          <div class="game_info_title" @click="jumpToSubstationHomePage(item)">
            {{ item.parent ? item.parent.name + '-' : '' }}{{ item.name }}
          </div>
          <div>
            <span
              class="game_info_status"
              :class="{'status_entry': item.statusCode === 'EntryStarted', 'status_notStart': item.statusCode === 'Scheduled'}"
            >
              {{ item.status.name }}
            </span>
          </div>
          <div class="game_info_date">{{ item.startTime ? item.startTime.slice(0, 10) : '' }}</div>
        </div>
      </li>
      <li v-show="!substationList.length">
        <div class="van-list__finished-text">没有更多了</div>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionChildren2 // 获取分站赛列表（不需要权限）
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementCompetitionChildren2QO // 获取分站赛列表（不需要权限）
} from '@/lib/form/game/swaggerForm';
export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: false,
      qo: new Api_GET_EventsManagementCompetitionChildren2QO(),
      substationList: []
    };
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    getPageList() {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      delete _qo.Page;
      delete _qo.SkipCount;
      delete _qo.MaxResultCount;
      _qo.ParentId = this.gameInfo.id;
      _qo.IsPublished = true;
      _qo.HasParent = true;
      // _qo.IsFinal = true;
      _qo.HasFinalQualification = true;
      _qo.IncludeStatus = true;
      // _qo.IncludeType = true;
      // _qo.IncludeApproveStatus = true;
      // _qo.IncludeLevel = true;
      // _qo.IncludeSetting = true;
      // _qo.IncludeReportSetting = true;
      // _qo.IncludeEntryFields = true;
      _qo.IncludeParent = true;
      delete _qo.IsFinal; // 不需要传isFinal, isfinal=true 则只查决赛;isfinal=false 则只查非决赛;不传查所有
      this.apiCompetitionChildren(_qo);
    },
    // 获取分站赛列表（不需要权限）
    apiCompetitionChildren(qo) {
      this.pageLoading = true;
      api_GET_EventsManagementCompetitionChildren2(qo)
        .then(
          res => {
            this.pageLoading = false;
            this.substationList = res.items;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            console.log(error);
          }
        );
    },
    jumpToSubstationHomePage (item) {
      const _origin = window.location.origin;
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.href = `${_origin}/mobile.html#/home/${item.route + (item.tenantId ? '_' + item.tenantId : '')}/info`;
      a.target = '_blank';
      a.dispatchEvent(event);
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
.tab_model {
  padding-top: 20px;
}
.game_logo_wrap {
  width: 60px;
  height: 60px;
  padding-top: 8px;
}
.game_logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  vertical-align: top;
}
.game_info_wrap {
  margin-left: 97px;
  word-break: break-all;
}
.game_info_title {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
  margin-bottom: 5px;
}
.game_info_status {
  display: inline-block;
  vertical-align: top;
  padding: 1px 10px;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  border-radius: 13px;
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
  background-color: #BDBDBD;
}
.game_info_date {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.status_entry {
  background-color: #1FC100;
}
.status_notStart {
  background-color: #EA7119;
}
</style>
